<template>
  <!-- 历史 -->
  <div class="history">
    <!-- 时间线 -->
    <div class="history-timeline">
      <div class="history-timeline-line"></div>
      <div class="history-timeline-left"></div>
      <swiper
        v-if="list.length"
        ref="swiper"
        :slidesPerView="4"
        loop
        :autoplay="{
          delay: 5000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
          pauseOnMouseEnter: true,
        }"
        class="history-timeline-list"
        @swiper="onTimelineInit"
        @slideChange="onTimelineChange"
      >
        <swiper-slide v-for="(item, index) in list" :key="item.id">
          <div class="history-timeline-item" @click="onTimelineTo(index)">
            <div
              class="history-timeline-item-dot"
              :class="{
                'history-timeline-item-dot_active': index == timeline.index,
              }"
            ></div>
            <div class="history-timeline-item-name">
              {{ item.name }}
            </div>
          </div>
        </swiper-slide>
      </swiper>
      <div class="history-timeline-right"></div>
    </div>

    <!-- 新版swiper -->
    <!-- <swiper
      :slidesPerView="1"
      loop
      :autoplay="{
        delay: 5000,
        stopOnLastSlide: false,
        disableOnInteraction: false,
        pauseOnMouseEnter: true,
      }"
      :pagination="{
        el: '.swiper-pagination',
        clickable: true,
        type: 'progressbar',
      }"
      class="swiper-container"
      :navigation="{
        nextEl: '.swiper-container-button-next',
        prevEl: '.swiper-container-button-prev',
      }"
    >
      <swiper-slide class="swiper-slide" v-for="item in data" :key="item">
        <div class="content">
          <div class="img-box">
            <img
              class="img-border"
              v-if="item.webimages"
              src="../../../assets/image/about/p-development-border.png"
            />
            <img class="img" :src="item.webimages" />
          </div>

          <img class="bg" src="../../../assets/image/about/development.png" />
          <div class="year">{{ item.year }}年</div>
          <div class="right">

            <span class="month" v-if="item.month"
              >{{ item.month }}月
              <span v-if="item.day">{{ item.day }} 日 </span>
            </span>

            <div class="text">{{ item.description }}</div>
          </div>
        </div>
      </swiper-slide>
      <template #container-start>
        <div class="swiper-container-button swiper-container-button-next"></div>
        <div class="swiper-container-button swiper-container-button-prev"></div>
        <div class="swiper-pagination"></div>
      </template>
    </swiper> -->
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    list: Array,
  },
  data() {
    return {
      timeline: {
        swiper: Object,
        index: 0,
      },
    };
  },
  mounted() {},
  methods: {
    onTimelineInit(timeline) {
      this.timeline.swiper = timeline;
    },
    onTimelineChange(timeline) {
      console.log("onTimelineChange", timeline);
      this.timeline.index = timeline.realIndex;
    },
    onTimelineTo(index) {
      if (this.list.length - this.timeline.index < this.list.length / 2) {
        index += this.list.length;
      }
      this.timeline.swiper.slideToLoop(index);
      // this.timeline.swiper.slideTo(index);
    },
  },
};
</script>
<style lang="scss" scoped>
.history {
  &-timeline {
    display: flex;
    align-items: center;
    position: relative;

    %button {
      width: calc(34 / 7.5 * 1vw);
      height: calc(34 / 7.5 * 1vw);
      background-size: 100%;
      display: block;
      position: relative;
    }

    &-left {
      @extend %button;
      background-image: url("~@/assets/image/investors/ic_left.png");
    }

    &-right {
      @extend %button;
      background-image: url("~@/assets/image/investors/ic_right.png");
    }

    &-list {
      flex: 1;
      height: fn.rpx(100);
    }

    &-item {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;

      &-dot {
        // box-sizing: border-box;
        // width: fn.rpx(6);
        // height: fn.rpx(6);
        // background: #333333;
        // opacity: 0.5;
        // border-radius: fn.rpx(3);
        margin: auto;
        width: calc(16 / 7.5 * 1vw);
        height: calc(16 / 7.5 * 1vw);
        display: flex;
        justify-content: center;
        align-items: center;
        border: transparent fn.rpx(2) solid;
        border-radius: 50%;

        &::after {
          content: "";
          display: block;
          border-radius: 50%;
          width: fn.rpx(6);
          height: fn.rpx(6);
          background-color: #333;
        }

        &_active {
          border: color.$base fn.rpx(2) solid;

          &::after {
            background-color: color.$base;
          }
        }
      }

      &-name {
        // position: absolute;
        // top: 100%;
        // left: 50%;
        // transform: translateX(-50%);
        font-size: fn.rpx(24);
      }
    }

    &-line {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      background: #e9e9e9;
      height: fn.rpx(2);
      top: fn.rpx(2);
    }
  }
}
</style>